<template>  
    <div class="container">   
      <div class="main">  
        <div class="header">  
            生产日历
          <el-button type="primary" @click="add">新建</el-button>  
          <el-button type="success" @click="importData">导入</el-button>  
          <el-button type="warning" @click="edit">编辑</el-button>  
          <el-select v-model="selectedFilter" placeholder="请选择状态" style="width: 200px;">  
            <el-option label="启用" value="enabled"></el-option>  
            <el-option label="禁用" value="disabled"></el-option>  
          </el-select>  
          <el-input placeholder="请输入关键字搜索" v-model="searchTable" style="width: 200px;"/>  
          <el-button type="info" @click="query">查询</el-button>  
          <el-button type="info" @click="query">重置</el-button>  
        </div>  
        <el-table :data="tableData" border class="eltable">  
          <el-table-column prop="number" label="序号" width="80"></el-table-column>  
          <el-table-column prop="groupName" label="产品编码"></el-table-column>  
          <el-table-column prop="groupType" label="产品名称"></el-table-column>  
          <el-table-column prop="parentGroup" label="产品分类"></el-table-column>  
          <el-table-column prop="groupAttribute" label="产品型号" ></el-table-column>  
          <el-table-column prop="groupClass" label="产品单位" ></el-table-column>  
          <el-table-column prop="responsible" label="产品类型"></el-table-column>  
          <el-table-column prop="remark" label="关联物料"></el-table-column>  
          <el-table-column prop="status" label="启用">  
            <template #default="{ row }">  
              <el-switch v-model="row.status" active-text="是" inactive-text="否"></el-switch>  
            </template>  
          </el-table-column>  
          <el-table-column label="操作" width="300">  
            <template #default="{ row }">  
              <el-button type="text" @click="editRow(row)">编辑</el-button>  
              <el-button type="text" @click="deleteRow(row)">删除</el-button>  
            </template>  
          </el-table-column>  
        </el-table>  
        <el-pagination  
          @current-change="handleCurrentChange"  
          :current-page="currentPage"  
          :page-size="pageSize"  
          :total="totalItems"  
          layout="total, prev, pager, next, jumper">  
        </el-pagination>  
      </div>  
    </div>  
  </template>  
  
  <script>  
  import { ref } from 'vue';  
  
  export default {  
    setup() {  
      const searchKey = ref('');  
      const treeData = ref([]);  
      const defaultProps = {  
        children: 'children',  
        label: 'label',  
      };  
  
      const tableData = ref([]);  
  
      const selectedFilter = ref('');  
      const searchTable = ref('');  
      const currentPage = ref(1);  
      const pageSize = ref(2);  
      const totalItems = ref(3);  
  
      const add = () => {  
        // 添加逻辑  
      };  
  
      const edit = () => {  
        // 编辑逻辑  
      };  
  
      const importData = () => {  
        // 导入逻辑  
      };  
  
      const query = () => {  
        // 查询逻辑  
        console.log('Querying with:', searchTable.value);  
      };  
  
      const editRow = (row) => {  
        // 编辑行逻辑  
        console.log('Editing row:', row);  
      };  
  
      const deleteRow = (row) => {  
        // 删除行逻辑  
        console.log('Deleting row:', row);  
      };  
  
      const handleCurrentChange = (page) => {  
        currentPage.value = page;  
        // 分页逻辑  
        console.log('Current page:', page);  
      };  
  
      // 确保所有函数都被返回  
      return {  
        searchKey,  
        treeData,  
        defaultProps,  
        tableData,  
        selectedFilter,  
        searchTable,  
        currentPage,  
        pageSize,  
        totalItems,  
        add,  
        edit,  
        importData,  
        query,  
        editRow,  
        deleteRow,  
        handleCurrentChange,  
      };  
    },  
  };  
  </script>  
  
  <style>  
.container {  
  display: flex;  
  gap: 20px;
  height: 95%;
}  

.sidebar {  
  height: 100%;
  
}  

.main {  
  width: 80%;
  flex: 1;  
  height: 100%;
}  

.header {  
   display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}  
.eltable{
  height: 95%;
}
.letree{
  height: 100%;
}
</style>